<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Windoo.Ajax example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
    @import url(themes/common.css);
    @import url(themes/windoo.css);
    @import url(themes/windoo.alphacube.css);
</style>
<!--[if IE]><link rel="stylesheet" type="text/css" href="../css/ie.css" media="screen,handheld" /><!{endif]-->
<script src="js/mootools-release-1.11.js" type="text/javascript" charset="utf-8"></script>
<script src="js/windoo.r114.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">//<![CDATA[

window.addEvent('domready', function(){

	var win = new Windoo({
		resizable: false,
		destroyOnClose: false,
		title: 'Image view',
		width: 400,
		height: 500
	});

	var loadContent = function() {
		if (!$('image').value) return;

		// clear window content, display loading icon and ensure window is shown
		win.setHTML('<div><img src="images/loading.gif" class="loading" alt="loading..."/></div>').show();

		// send ajax request
		new Windoo.Ajax('image.php', {
			data: $('frm').toQueryString(),
			evalScripts: true,
			window: win
		}).request();
	};

	$('frm').addEvent('submit', function(ev){
		new Event(ev).stop();
		loadContent();
	});

	$('image').addEvent('change', function(){
		loadContent();
	});

});

//]]></script>

<style type="text/css">

.windoo-body {
	color:black;
	text-align:center;
}

.windoo-body .img-view {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	display:block;
	overflow:auto;
	width:95%;
	height:295px;
	margin:5px auto 10px;
	text-align:center;
}

.windoo-body textarea {
	display:block;
	width:90%;
	margin:0 auto;
	height:80px
}

.preview {
	display:block;
	border:solid #555 1px;
	border-left:0;
	border-right:0;
	padding:.5em;
}
.preview h3 {
	margin:0;
}

</style>
</head>
<body>

<div id="wrap">

<div id="content">
	
	<form action="#" id="frm">
	<p>
		<label for="image">Image:</label>
		<select id="image" name="image">
			<option value="" selected>(select image)</option>
			<option value="images/detailtask_diag3.png">Flower</option>
			<option value="images/appletParams.png">Coins</option>
			<option value="images/detailtask_diag2.png">Dice</option>
		</select>
		<input type="submit" class="submit" value="Load"/>
	</p>
	</form>

	<div class="preview">
		<h3>Live preview:</h3>

		<pre id="description">no image</pre>
	</div>

</div>	

</div>

</body>
</html>